<template>
  <div class="page-wrapper">
    <div style="flex:1">
      <div class="search-container">
        <i :class="{'is-open': isOpen}" class="open-icon el-icon-s-unfold" @click="toggleSearch"></i>
        <transition name="fade">
          <div v-show="isOpen" class="search-row">
            <div class="item">
              <label>配电房</label>
              <el-select v-model="curStation" size="small" @change="stationChange">
                <el-option v-for="s in stations" :key="s.pkid" :value="s.pkid" :label="s.name"></el-option>
              </el-select>
            </div>
            <div class="item">
              <label>接线图</label>
              <el-select v-model="curId" size="small">
                <el-option v-for="s in options" :key="s.pkid" :value="s.pkid" :label="s.dname"></el-option>
              </el-select>
            </div>
          </div>
        </transition>
      </div>
      <c-dlg
        :visible="Boolean(showType)"
        :title="showType === 'warninfo' ? '警告列表' : '设备列表'"
        :type="2"
        class="list-dlg"
        @close="closeDlg"
      >
        <template v-if="showType === 'warninfo'">
          <el-table v-loading="loading" :data="alarmList" style="width: 800px">
            <el-table-column prop="deviceName" label="设备名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="clientName" label="客户/公司名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="stationName" label="站点名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="etime" label="告警时间" show-overflow-tooltip></el-table-column>
            <el-table-column prop="description" label="描述" show-overflow-tooltip></el-table-column>
            <el-table-column prop="staus" label="状态" width="80">
              <template v-slot="{row}">{{ statusList[row.status] }}</template>
            </el-table-column>
            <!-- <el-table-column label="操作">
              <template v-slot="{row, $index}">
                <el-button size="small" type="text" @click="showDlg(row)">详情</el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <div class="pagination">
            <el-pagination
              layout="prev, pager, next"
              :page-size="alarmPage.size"
              :current-page.sync="alarmPage.index"
              :total="alarmPage.total"
              @current-change="getAlarmList"
            ></el-pagination>
          </div>
        </template>
        <template v-if="showType === 'setsinfo'">
          <el-table v-loading="loading" :data="devList" style="width: 600px">
            <el-table-column prop="devName" label="设备名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="brandInfo" label="品牌信息" show-overflow-tooltip></el-table-column>
            <el-table-column prop="devCode" label="设备编码" show-overflow-tooltip></el-table-column>
            <el-table-column prop="model" label="规格型号" show-overflow-tooltip></el-table-column>
            <el-table-column prop="heldPerson" label="责任人" show-overflow-tooltip></el-table-column>
            <el-table-column prop="devStatus" label="设备状态">
              <template v-slot="{row}">{{ statusList[row.devStatus - 1] }}</template>
            </el-table-column>
            <!-- <el-table-column label="操作">
              <template v-slot="{row, $index}">
                <el-button size="small" type="text" @click="showEditDlg(row)">编辑</el-button>
                <el-button size="small" type="text" @click="deleteDev(row)">删除</el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <div class="pagination">
            <el-pagination
              layout="prev, pager, next"
              :page-size="devPage.size"
              :current-page.sync="devPage.index"
              :total="devPage.total"
              @current-change="getDevList"
            ></el-pagination>
          </div>
        </template>
      </c-dlg>
      <iframe v-if="curId" id="svg-frame" ref="svgPage" :src="svgUrl" frameborder="0" class="svg"></iframe>
    </div>
    <side-dlg v-if="curStation" :station-id="curStation" />
  </div>
</template>

<script>
import { getStations } from "@/api/user";
import { mapGetters } from "vuex";
import SideDlg from "./components/sideDlg";
import CDlg from "@/components/CDlg";
import { getDevsById } from "../../api/svg";
import { getAlarmList } from "../../api/alarm";
export default {
  name: "SvgDev",
  components: {
    SideDlg,
    CDlg
  },
  data() {
    return {
      svgWindow: null,
      curStation: null,
      curId: null,
      svgs: null,
      stations: null,
      isOpen: true,
      showType: null,
      statusList: ["未处理", "取消", "确认", "派单"],
      devPage: {
        index: 1,
        size: 10,
        total: 0
      },
      devList: null,
      alarmPage: {
        index: 1,
        size: 10,
        total: 0
      },
      alarmList: null,
      elementId: null,
      loading: false
    };
  },
  computed: {
    ...mapGetters(["comId"]),
    options() {
      return this.svgs;
    },
    svgUrl() {
      return "/api/svg/svg.html?id=" + this.curId;
    }
  },
  async created() {
    await this._getStations();
    this._getSvgs();
  },
  mounted() {
    this.svgWindow = this.$refs.svgPage;
    // this.svgWindow.postMessage(this.$store.getters.token);
    // window.addEventListener('message', this.receiveMessage)
    window.getToken = () => {
      return this.$store.getters.token;
    };
    window.controlRClick = (elementId, source) => {
      this.elementId = elementId.id;
      this.showType = source;
      if (source === "warninfo") {
        this.$set(this.alarmPage, "index", 1);
        return this.getAlarmList();
      } else if (source === "setsinfo") {
        this.$set(this.devPage, "index", 1);
        return this.getDevList();
      }
    };
  },
  destroyed() {
    delete window.getToken;
    delete window.controlRClick;
  },
  methods: {
    _getSvgs() {
      return this.$axios
        .get(`/svg/pages/` + this.curStation, { params: { type: 2 } })
        .then(res => {
          if (res.code === 1) {
            this.svgs = res.data;
            // this.curId = res.data[0].pkid;
          } else throw res.msg;
        })
        .catch(e => {});
    },
    _getStations() {
      return getStations(this.$store.getters.comId)
        .then(data => {
          if (!this.curStation) {
            this.curStation = data[0].pkid;
          }
          this.stations = data;
        })
        .catch(e => {});
    },
    getAlarmList() {
      const params = {
        elementId: this.elementId,
        clientId: this.comId
      };
      this.loading = true;
      return getAlarmList(params)
        .then(data => {
          this.$set(this.alarmPage, "total", data.total);
          this.alarmList = data.rows;
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    getDevList() {
      this.$set(this.devPage, "index", 1);
      const params = {
        page: this.devPage.index,
        rows: this.devPage.size,
        elementId: this.elementId,
        substationID: this.curStation,
        svgId: this.curId
      };
      this.loading = true;
      return getDevsById(params)
        .then(data => {
          this.$set(this.devPage, "total", data.total);
          this.devList = data.rows;
        })
        .catch(e => this.$message.error(e))
        .finally(() => (this.loading = false));
    },
    stationChange() {
      this.curId = null;
      this._getSvgs();
    },
    toggleSearch() {
      this.isOpen = !this.isOpen;
    },
    closeDlg() {
      this.showType = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 0;
  margin: 0;
  height: 100%;
  background: #fff;
  display: flex;
  align-items: stretch;
  flex-direction: row;
}
.svg {
  flex: 1;
  min-height: 100%;
  width: 100%;
  overflow: hidden;
}
.search-container {
  position: absolute;
  // left: 20px;
  top: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  height: 32px;
  .item {
    margin: 0;
    margin-right: 16px;
  }
  .open-icon {
    font-size: 28px;
    color: 333;
    margin-right: 16px;
    cursor: pointer;
    transition: all 0.5s;
    &:hover {
      color: #999;
    }
    &.is-open {
      transform: rotateY(180deg);
    }
  }
}
.list-dlg {
  /deep/ .content {
    margin: 0;
  }
  .pagination {
    margin-bottom: 10px;
  }
}
</style>
